<template>
    <div>
        <el-button>添加banner</el-button>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <el-upload
                action="#"
                list-type="picture-card"
                :http-request="upload"
                :limit="limit"
                :on-exceed="tip"
            >
                    <div slot="file" slot-scope="{file}">
                        <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt=""
                        >
                    </div>
                    <i slot="default" class="el-icon-plus"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {uploadImage} from '@/api/main'
export default {
    data(){
        return {
            dialogVisible:true,
            imageUrl:'',
            limit:1
        }
    },
    methods:{
        upload(e){
            console.log("======",e)
            let formdata = new FormData();

            formdata.append('file',e.file);

            console.log(formdata)

            uploadImage(formdata).then(res => {
                console.log(res)
                this.imageUrl = res.data.data.filename;
            })
        },
        tip(){
            console.log("error")
            this.$message('只能上传一张')
        }
    }
}
</script>